<form class="layui-form seller-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-input-inline seller-inline-3" style="width: 150px;">
                <select name="card_type" lay-verify="" >
                    <option value="">Card Type</option>
                    <option value="556305">556305</option>
                    <option value="556766">556766</option>
                    <option value="558068">558068</option>
                    <option value="531847">531847</option>
                    <option value="556735">556735</option>
                    <option value="519075">519075</option>
                    <option value="559666">559666</option>
                    <option value="451946">451946</option>
                    <option value="556150">556150</option>
                    <option value="485997">485997</option>
                    <option value="531993">531993</option>
                    <option value="559292">559292</option>
                    <option value="556371">556371</option>
                    <option value="553437">553437</option>
                    <option value="404038">404038</option>
                    <option value="534786">534786</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline seller-inline-3" style="width: 150px;">
                <select name="card_status" lay-verify="" >
                    <option value="">Card Status</option>
                    <option value="1">ACTIVE</option>
                    <option value="2">SUSPENDED</option>
                    <option value="3">CLOSED</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline seller-inline-3" style="width: 150px;">
                <select name="check_status" lay-verify="" >
                    <option value="">Check Status</option>
                    <option value="0">开卡中</option>
                    <option value="1">已开卡</option>
                    <option value="2">开卡失败</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline seller-inline-3">
                <input type="text" name="username" lay-verify="title" placeholder="username" autocomplete="off"
                       value="{$user_name}" id="username" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline seller-inline-3">
                <input type="text" name="memo" lay-verify="title" placeholder="memo" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline seller-inline-3">
                <input type="text" name="card_token" lay-verify="title" placeholder="Card Token" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-input-inline seller-inline-3">
                <input type="text" name="card_num" lay-verify="title" placeholder="Card Num" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline seller-inline-4">
                <input type="text" name="datetime" id="datetime" placeholder="start_time _ end_time" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline seller-inline-3" style="width: 150px;">
                <select name="card_int" lay-verify="" >
                    <option value="">所有卡</option>
                    <option value="1">负值余额</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline seller-inline-3" style="width: 180px;">
                <select name="bank_type" lay-verify="" >
                    <option value="">银行类型</option>
                    <option value="1">Comdata</option>
                    <option value="3">Connexpay</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="*"><i class="iconfont icon-chaxun"></i>Search</button>
                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="updateCard">手动开卡</button>
<!--                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="updateCardInt">修复负值余额卡</button>-->
            </div>
        </div>
    </div>
</form>

<div class="table-body">
    <table id="balanceTable" lay-filter="balanceTable"></table>
</div>
<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="ON|OFF" lay-filter="change_status" {{ d.status != 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="toolbar">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="ref">修复负数</button>
    <button type="button" class="layui-btn layui-btn-sm" lay-event="active">激活</button>
    <button type="button" class="layui-btn layui-btn-sm" lay-event="suspended">冻结</button>
    <button type="button" class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
</script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'table'], function () {
        var laydate = layui.laydate;
        var table   = layui.table;

        //时间插件
        laydate.render({
            elem: '#datetime',
            range: '_',
            format: 'yyyy-MM-dd'
        });
        var tableIn = layui.table.render({
            elem: '#balanceTable',
            height: 'full-99',
            cellMinWidth: '80',
            totalRow: true,
            method: 'post',
            toolbar: '#toolbar',
            where:{username:$("#username").val()},
            url: "{:url('cards/index')}",
            id: 'balanceTable',
            cols: [[
                { type: 'checkbox', fixed: 'left'},
                { type: 'numbers'},
                { field: 'option', title: '操作', templet: function (d) {
                    var html ='<a class="layui-btn layui-btn-xs upBalance" data-id="' + d.id + '">api余额</a>';
                        html += '<a class="layui-btn layui-btn-xs debitBalance" data-id="' + d.id + '">减少余额</a>';
                        return html
                    }, align: 'center',width: 150
                },
                { field: 'check_status', title: '状态', width:100 ,
                    templet:function (d) {
                        const check_status  =   d.check_status;
                        var   html          =   '';
                        switch (check_status) {
                            case 0:
                                html = "<span style='color: #8c8c8c'>开卡中</span>";
                                break;
                            case 1:
                                html = "<span style='color: green'>已开卡</span>";
                                break;
                            case 2:
                                html = "<span style='color: red'>开卡失败</span>";
                                break;
                        }
                        return html;
                    }
                },
                { field: 'username', align: 'left', title: 'UserName' ,width:170 },
                { field: 'status', title: '类型', width:100 ,
                    templet:function (d) {
                        const status=   d.status;
                        var   html  =   '';
                        switch (status) {
                            case '1':
                                html = "<span style='color: green'>ACTIVE</span>";
                                break;
                            case '2':
                                html = "<span style='color: #6c757d'>SUSPENDED</span>";
                                break;
                            case '3':
                                html = "<span style='color: red'>CLOSED</span>";
                                break;
                            case '4':
                                html = "<span style='color: red'>Fraud</span>";
                                break;
                        }
                        return html;
                    }
                },//toolbar: '#status'},
                { field: 'card_num', title: 'CardNum',width: 200,align:"left",totalRowText:'Total：', templet: function (d) {
                        const card_num = d.card_num;
                        const bank_type= d.bank_type;
                        var html = '<a class="layui-btn layui-btn-xs">' + bank_type + '</a>' +
                            '&nbsp;&nbsp;<a style="color: #0e8df3;" ' +
                            'href="' + "{:url('cards/cardLog')}?card_num=" + card_num + '">' + "'" + card_num + '</a>';
                        return html;
                    }
                },
                { field: 'card_token', align: 'left', title: 'CardToken' ,width: 120},
                {field: 'balance', title: '余额($)', align:"right",
                    style:'color:#FF5722;font-weight:bold' , width:120,totalRow: true
                },
                {field: 'balance_account', title: '总金额($)', align:"right",
                    style:'color:#FF5722;font-weight:bold' , width:140, totalRow: true},
                { field: 'card_name', title: 'CardName', width:120 ,
                    templet:function (d) {
                        return d.first_name + ' ' + d.last_name
                    }
                },
                { field: 'card_name', title: 'middleName', width:120 ,
                    templet:function (d) {
                        return d.middle_name;
                    }
                },
                { field: 'card_name', title: 'UpCardName', width:150 ,
                    templet:function (d) {
                        return d.first_name_up + ' ' + d.last_name_up;
                    }
                },
                { field: 'ice_amount', title: '冻结金额($)', align:"right",width:130,
                    style:'color:#FF5722;font-weight:bold', totalRow: true},
                {field: 'open_amount', title: '开卡($)', align:"right",
                    style:'color:#FF5722;font-weight:bold' , width:140, totalRow: true},
                {field: 'server_amount', title: '服务费($)', align:"right",
                    style:'color:#FF5722;font-weight:bold' , width:120, totalRow: true},
                {field: 'refund_amount', title: '退款服务费($)', align:"right",
                    style:'color:#FF5722;font-weight:bold' , width:120, totalRow: true},
                { field: 'exp_date', align: 'center', title: 'ExpDate' ,width:150},
                { field: 'cvv', align: 'center', title: 'Cvv' ,width:100},
                { field: 'ctime', align: 'center', title: 'create time' ,width:180,
                    templet: function (d) {
                        return layui.util.toDateString(d.ctime * 1000, "yyyy-MM-dd HH:mm:ss");
                    }
                },
                { field: 'memo', align: 'center', title: 'Memo' , width:120 },
                { field: 'address', title: 'Address', width:120 ,
                    templet:function (d) {
                        return d.billing_address + ' ' + d.apartment;
                    }
                },
                { field: 'city', title: 'City', width:120 },
                { field: 'state', title: 'State', width:120 },
                { field: 'zip', title: 'Zip', width:120 }
            ]],
            page: true,
            limit: 20,
            limits: [20 , 100 , 500 ,1000 ,3000,5000]
        });
        layui.form.on('submit(*)', function (data) {
            layui.table.reload('balanceTable', {
                where: data.field
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        layui.form.on('submit(updateCard)', function () {
            var loading =layer.load(1, {shade: [0.1,'#fff']});
            JsPost("{:url('cards/updateCard')}",'', function(res){
                layer.close(loading);
                if(res.code >0){
                    layer.msg(res.msg , {time:1500 , icon:1});
                    setTimeout("window.location.href='" + "{:url('cards/index')}" + "'; ", 1000);
                }else{
                    layer.msg(res.msg , {time:1500 , icon:2});
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        layui.form.on('submit(updateCardInt)', function () {
            var loading =layer.load(1, {shade: [0.1,'#fff']});
            JsPost("{:url('cards/updateCardInt')}",'', function(res){
                layer.close(loading);
                if(res.code >0){
                    layer.msg(res.msg , {time:1500 , icon:1});
                    setTimeout("window.location.href='" + "{:url('cards/index')}" + "'; ", 1000);
                }else{
                    layer.msg(res.msg , {time:1500 , icon:2});
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //余额编辑
        $(document).on('click', '.upBalance', function () {
            var id = $(this).attr('data-id');
            var loading =layer.load(1, {shade: [0.1,'#fff']});
            JsPost('{:url("cards/upBalance")}', {card_id:id},function (re) {
                layer.close(loading);
                if(re.code >0){
                    layer.msg(re.msg , {icon:1,time:1500});
                    tableIn.reload({
                        page:{
                            curr :1
                        }
                    });
                }else{
                    layer.msg(re.msg, {icon:2,time:1500});
                }
            });
        });

        $(document).on('click', '.debitBalance', function () {
            var id = $(this).attr('data-id');
            JsGet("{:url('cards/debitBalance')}?card_id="+id, function(e){
                if(e.status == 1){
                    layer.open({
                        type: 1,
                        title: '减少卡余额',
                        area: ['550px', '400px'], //宽高
                        content: e.datas,
                        btn:['Confirm','Close'],
                        yes:function (index,layero) {
                            var thedata = $('.operationForm').serialize();
                            var amount   = $("#amount").val();
                            if (amount == '' || !amount) {
                                layer.msg("Please input in Change Money" , {icon:2,time:1500});
                                return false;
                            }
                            JsPost('{:url("cards/debitBalance")}', thedata,function (re) {
                                if(re.code >0){
                                    layer.msg(re.msg , {icon:1,time:1500});
                                    layer.close(index);
                                    tableIn.reload({
                                        page:{
                                            curr :1
                                        }
                                    });
                                }else{
                                    layer.msg(re.msg, {icon:2,time:1500});
                                }
                            });
                        }
                    });
                }else{
                    layer.msg(e.msg);
                }
            });
        });

        layui.form.on('switch(change_status)', function(obj){
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var id = this.value;
            $.post('{:url("groupStatus")}',{'id':id},function (res) {
                layer.close(loading);
                layer.msg(res.msg,{time:1500,icon:(res.code > 0)? 1:2}, function () {
                    // location.href = res.url;
                    tableIn.reload({
                        page:{
                            curr :1
                        }
                    });
                });
            })
        });

        table.on('toolbar(balanceTable)', function(obj) {
            const checkStatus = table.checkStatus(obj.config.id);
            const data = checkStatus.data;
            if(obj.event == 'suspended' || obj.event == 'active'){
                if(data.length >0){
                    switch (obj.event) {
                        case 'suspended':
                            var status = '1';
                            var msg    = 'active';
                            break;
                        case 'active':
                            var status = '2';
                            var msg    = 'blocked';
                            break;
                    }

                    var id_array = [];
                    for(var i=0;i<data.length;i++){
                        if(data[i].status == status){
                            id_array.push(data[i].id);
                        }
                    }
                    if(id_array.length >0){
                        // if(id_array.length >10){
                        //     layer.msg("每次只能选择10张卡.",{time:2000,icon:16});
                        //     return false;
                        // }
                    }else{
                        layer.msg("至少选择一张卡 " + msg + ".",{time:2000,icon:16});
                        return false;
                    }
                    var loading =layer.load(1, {shade: [0.1,'#fff']});
                    $.post("{:url('changeCardStatus')}",{id_array:id_array,type:obj.event},function(res){
                        layer.close(loading);
                        if(res.code>0){
                            layer.msg(res.msg, {time: 1500, icon: 16}, function () {
                                location.href = res.url;
                            });
                        }else{
                            layer.msg(res.msg,{time:1500,icon:16});
                        }
                    });
                }else{
                    layer.msg("请选择需要更新的卡.",{time:2000,icon:16});
                }
            } else
            if(obj.event == 'ref'){
                if(data.length >0){
                    var id_array = [];
                    for(var i=0;i<data.length;i++){
                        if(data[i].balance < 0 ){
                            id_array.push(data[i].id);
                        }
                    }
                    if(id_array.length >0){
                        if(id_array.length >10){
                            layer.msg("每次只能选择10张负值的卡.",{time:2000,icon:16});
                            return false;
                        }
                    }else{
                        layer.msg("至少选择一张为负值的卡",{time:2000,icon:16});
                        return false;
                    }

                    var loading =layer.load(1, {shade: [0.1,'#fff']});
                    $.post("{:url('cards/updateCardIntOnly')}",{id_array:id_array},function(res){
                        layer.close(loading);
                        if(res.code >0){
                            layer.msg(res.msg , {time:1500 , icon:1});
                            setTimeout("window.location.href='" + "{:url('cards/index')}" + "'; ", 1000);
                        }else{
                            layer.msg(res.msg , {time:1500 , icon:2});
                        }
                    });
                }else{
                    layer.msg("请选择需要修复的卡.",{time:2000,icon:2});
                }
            }else
            if(obj.event == 'delete'){
                if(data.length >0){
                    var id_array = [];
                    for(var i=0;i<data.length;i++){
                        if(data[i].status == 1 || data[i].status == 2){
                            id_array.push(data[i].id);
                        }
                    }
                    if(id_array.length >0){
                        if(id_array.length >10){
                            layer.msg("每次只能选择10张卡.",{time:2000,icon:16});
                            return false;
                        }
                    }else{
                        layer.msg("至少选择一张有效卡(激活或冻结的卡)",{time:2000,icon:16});
                        return false;
                    }
                    var loading =layer.load(1, {shade: [0.1,'#fff']});
                    $.post("{:url('deleteCards')}",{id_array:id_array},function(res){
                        layer.close(loading);
                        if(res.code >0){
                            layer.msg(res.msg , {time:1500 , icon:1});
                            setTimeout("window.location.href='" + "{:url('cards/index')}" + "'; ", 1000);
                        }else{
                            layer.msg(res.msg , {time:1500 , icon:2});
                        }
                    });
                }else{
                    layer.msg("请选择需要修复的卡.",{time:2000,icon:2});
                }
            }
        });
    });
</script>